<template>
  <!-- 用户自定义属性 -->
  <div class="dist_list">
    <el-row :gutter="10" style="margin-bottom: 10px">
      <el-col :span="12"> <div class="check_box summary">表达式</div></el-col>
      <el-col :span="12"> <div class="check_box summary">作为</div></el-col>
    </el-row>

    <el-row
      style="margin-bottom: 10px"
      :gutter="20"
      v-for="(item, index) in value.select.value"
      :key="index"
    >
      <el-col :span="12">
        <!-- {{ objKey }} -->
        <!-- :objKey="'funArrAll'" -->
        <PopoverInput
          :value="item.expression"
          @input="
            (even) => {
              ceshi(even, item);
            }
          "
          @changeRadio="
            (row) => {
              changeRadio(row, item);
            }
          "
          :objKey="objKey"
          :keys="'filterFun22' + index"
        ></PopoverInput>
      </el-col>
      <el-col :span="12">
        <el-input v-model="item.as" :disabled="true" size="small"></el-input
      ></el-col>
    </el-row>
  </div>
</template>

<script>
import PopoverInput from "@/components/PopoverInput";
export default {
  components: {
    PopoverInput,
  },
  props: {
    objKey: {
      type: String,
      default: "funArr",
    },
    value: {},
    attributeList: {
      type: Array,
      default: () => [],
    },
  },

  computed: {
    // 来源流名称
    // aftAttributeList: {
    //   get() {
    //     return this.$store.state.projection.relateData.targetCell.attributeList;
    //   },
    //   set(val) {
    //     this.$store.commit("projection/setUserAttributeList", val);
    //   },
    // },
    firstAttr() {
      const firstAttr =
        this.attributeList.length !== 0 ? this.attributeList[0] : "";
      this.form.expression = firstAttr.name;
      return firstAttr;
    },
  },
  data() {
    return {
      form: {
        expression: "",
      },
    };
  },
  methods: {
    ceshi($event, item) {
      item.expression = $event;
      this.$emit("input", {
        ...this.value,
        select: {
          ...this.value.select,
          value: this.value.select.value,
        },
      });
    },
    changeRadio(row, item) {
      item.expression = row.valueType;
      this.$emit("input", {
        ...this.value,
        select: {
          ...this.value.select,
          value: this.value.select.value,
        },
      });
      // this.$emit("input", { ...item, expression: row.value });
    },
  },
};
</script>

<style lang='scss' scoped>
.dist_list {
  /* display: flex; */
  /* align-items: center; */
  padding: 10px;
  background: rgba(233, 233, 233, 0.3);
  margin-top: 26px;
  justify-content: space-between;
  .dist_item {
    width: 100%;
    display: flex;
    flex-direction: column;
    &:first-child {
      margin-right: 10px;
    }
  }
}
</style>